<template>
    <a-dropdown
        trigger="contextMenu"
        :popup-max-height="false"
        @select="actionSelect"
    >
        <span
            class="arco-tag arco-tag-size-medium arco-tag-checked"
            :class="{ 'link-activated': itemData.path === $route.path }"
            @click="goto(itemData)"
        >
            <span class="tag-link">
                {{ $t(itemData.title) }}
            </span>
            <span
                class="arco-icon-hover arco-tag-icon-hover arco-icon-hover-size-medium arco-tag-close-btn"
                @click.stop="tagClose(itemData, index)"
            >
                <icon-close />
            </span>
        </span>
        <template #content>
            <a-doption :disabled="disabledReload" :value="Eaction.reload">
                <icon-refresh />
                <span>重新加载</span>
            </a-doption>
            <a-doption
                class="sperate-line"
                :disabled="disabledCurrent"
                :value="Eaction.current"
            >
                <icon-close />
                <span>关闭当前标签页</span>
            </a-doption>
            <a-doption :disabled="disabledLeft" :value="Eaction.left">
                <icon-to-left />
                <span>关闭左侧标签页</span>
            </a-doption>
            <a-doption
                class="sperate-line"
                :disabled="disabledRight"
                :value="Eaction.right"
            >
                <icon-to-right />
                <span>关闭右侧标签页</span>
            </a-doption>
            <a-doption :value="Eaction.others">
                <icon-swap />
                <span>关闭其它标签页</span>
            </a-doption>
            <a-doption :value="Eaction.all">
                <icon-folder-delete />
                <span>关闭全部标签页</span>
            </a-doption>
        </template>
    </a-dropdown>
</template>

<script lang="ts" setup>
    import { PropType, computed } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { useTabBarStore } from '@/store';
    import type { TagProps } from '@/store/modules/tab-bar/types';
    import {
        DEFAULT_ROUTE_NAME,
        REDIRECT_ROUTE_NAME,
    } from '@/router/constants';

    // eslint-disable-next-line no-shadow
    enum Eaction {
        reload = 'reload',
        current = 'current',
        left = 'left',
        right = 'right',
        others = 'others',
        all = 'all',
    }

    const props = defineProps({
        itemData: {
            type: Object as PropType<TagProps>,
            default() {
                return [];
            },
        },
        index: {
            type: Number,
            default: 0,
        },
    });

    const router = useRouter();
    const route = useRoute();
    const tabBarStore = useTabBarStore();

    const goto = (tag: TagProps) => {
        router.push({ ...tag });
    };
    const tagList = computed(() => {
        return tabBarStore.getTabList;
    });

    const disabledReload = computed(() => {
        return props.itemData.fullPath !== route.fullPath;
    });

    const disabledCurrent = computed(() => {
        return props.index === 0;
    });

    const disabledLeft = computed(() => {
        return [0, 1].includes(props.index);
    });

    const disabledRight = computed(() => {
        return props.index === tagList.value.length - 1;
    });

    const tagClose = (tag: TagProps, idx: number) => {
        tabBarStore.deleteTag(idx, tag);
        if (props.itemData.fullPath === route.fullPath) {
            const latest = tagList.value[idx - 1]; // 获取队列的前一个tab
            router.push({ name: latest.name });
        }
    };

    const findCurrentRouteIndex = () => {
        return tagList.value.findIndex((el) => el.fullPath === route.fullPath);
    };
    const actionSelect = async (value: any) => {
        const { itemData, index } = props;
        const copyTagList = [...tagList.value];
        if (value === Eaction.current) {
            tagClose(itemData, index);
        } else if (value === Eaction.left) {
            const currentRouteIdx = findCurrentRouteIndex();
            copyTagList.splice(1, props.index - 1);

            tabBarStore.freshTabList(copyTagList);
            if (currentRouteIdx < index) {
                router.push({ name: itemData.name });
            }
        } else if (value === Eaction.right) {
            const currentRouteIdx = findCurrentRouteIndex();
            copyTagList.splice(props.index + 1);

            tabBarStore.freshTabList(copyTagList);
            if (currentRouteIdx > index) {
                router.push({ name: itemData.name });
            }
        } else if (value === Eaction.others) {
            const filterList = tagList.value.filter((el, idx) => {
                return idx === 0 || idx === props.index;
            });
            tabBarStore.freshTabList(filterList);
            router.push({ name: itemData.name });
        } else if (value === Eaction.reload) {
            tabBarStore.deleteCache(itemData);
            await router.push({
                name: REDIRECT_ROUTE_NAME,
                params: {
                    path: route.fullPath,
                },
            });
            tabBarStore.addCache(itemData.name);
        } else {
            tabBarStore.resetTabList();
            router.push({ name: DEFAULT_ROUTE_NAME });
        }
    };
</script>

<style scoped lang="less">
    .tag-link {
        color: var(--color-text-2);
        text-decoration: none;
    }
    .link-activated {
        color: rgb(var(--link-6));
        .tag-link {
            color: rgb(var(--link-6));
        }
        & + .arco-tag-close-btn {
            color: rgb(var(--link-6));
        }
    }
    :deep(.arco-dropdown-option-content) {
        span {
            margin-left: 10px;
        }
    }
    .arco-dropdown-open {
        .tag-link {
            color: rgb(var(--danger-6));
        }
        .arco-tag-close-btn {
            color: rgb(var(--danger-6));
        }
    }
    .sperate-line {
        border-bottom: 1px solid var(--color-neutral-3);
    }
</style>
